<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            margin: 5px;
        }
    </style>
</head>

<body>
    <img id="h1" src="img/0.png"><img id="h2" src="img/0.png">时<img id="m1" src="img/0.png"><img id="m2" src="img/0.png">分<img id="s1" src="img/0.png"><img id="s2" src="img/0.png">秒
    <script>
        //  创建一个根据字符串修改相对照片路径的函数
        function fn(str, a, b) {
            for (var i = 0; i < str.length; i++) {
                a.src = 'img/' + str[0] + '.png'
                b.src = 'img/' + str[1] + '.png'
            }
        }
        //  创建一个定时器，每一秒获取当前时间
        setInterval(function() {
            var date = new Date()
            //  获取当前时间的小时并修改成两位数的字符串
            var h = date.getHours()
            h = h >= 10 ? h + '' : '0' + h
            //  获取当前时间的分钟并修改成两位数的字符串
            var m = date.getMinutes()
            m = m >= 10 ? m + '' : '0' + m
            //  获取当前时间的秒数并修改成两位数的字符串
            var s = date.getSeconds()
            s = s >= 10 ? s + '' : '0' + s

            // 调用fn函数 输入对应时间和图片id名
            fn(h, h1, h2)
            fn(m, m1, m2)
            fn(s, s1, s2)
        }, 1000)
    </script>
</body>

</html>